<template>
  <el-dialog
    :visible.sync="modal"
    :title="ruleForm.id ? '修改教师信息' : '添加教师信息'"
    width="70%"
    custom-class="custom-dialog-style"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="margin-bottom: 120px"
    >
      <div class="title">
        <span>基本信息</span>
      </div>
      <el-form-item label="姓名" prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="身份证" prop="idcard">
        <el-input v-model="ruleForm.idcard" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="ruleForm.mobile" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="身份证照片" prop="idcard_img">
        <div class="photo">
          <div class="photo_item">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              accept=".jpg, .png, jpeg"
              :on-change="(file) => handleAvatarSuccess(file, 1)"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="ruleForm.idcard_img" :src="ruleForm.idcard_img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="photo_p">
              <p class="photo_p_t">身份证正面</p>
              <p class="photo_p_t2">图片大小不超过5M</p>
              <p class="photo_p_t2">图片分辨率不低于72dpi</p>
              <el-popover placement="top-start" width="400" trigger="hover">
                <img
                  style="width: 100%"
                  src="https://t9.baidu.com/it/u=3980720114,1326431054&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=5C72851A87C041491ECDE8CA030080B1&sec=1745168400&t=b2e52f9a2dfa7106675e6fa28e84ee81"
                  alt=""
                />
                <!--<el-button slot="reference" style="padding: 0 !important" type="text">查看示例</el-button>-->
              </el-popover>
            </div>
          </div>
          <div class="photo_item">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              accept=".jpg, .png, jpeg"
              :on-change="(file) => handleAvatarSuccess(file, 2)"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="ruleForm.idcard_img2" :src="ruleForm.idcard_img2" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="photo_p">
              <p class="photo_p_t">身份证反面</p>
              <p class="photo_p_t2">图片大小不超过5M</p>
              <p class="photo_p_t2">图片分辨率不低于72dpi</p>
              <el-popover placement="top-start" width="400" trigger="hover">
                <img
                  style="width: 100%"
                  src="https://t9.baidu.com/it/u=3980720114,1326431054&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=5C72851A87C041491ECDE8CA030080B1&sec=1745168400&t=b2e52f9a2dfa7106675e6fa28e84ee81"
                  alt=""
                />
                <!--<el-button slot="reference" style="padding: 0 !important" type="text">查看示例</el-button>-->
              </el-popover>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="毕业证书" prop="graduation_img">
        <div class="photo">
          <div class="photo_item">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              accept=".jpg, .png, jpeg"
              :on-change="(file) => handleAvatarSuccess(file, 3)"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="ruleForm.graduation_img" :src="ruleForm.graduation_img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="photo_p">
              <p class="photo_p_t">毕业证书</p>
              <p class="photo_p_t2">图片大小不超过5M</p>
              <p class="photo_p_t2">图片分辨率不低于72dpi</p>
              <el-popover placement="top-start" width="400" trigger="hover">
                <img
                  style="width: 100%"
                  src="https://t9.baidu.com/it/u=3980720114,1326431054&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=5C72851A87C041491ECDE8CA030080B1&sec=1745168400&t=b2e52f9a2dfa7106675e6fa28e84ee81"
                  alt=""
                />
                <!--<el-button slot="reference" style="padding: 0 !important" type="text">查看示例</el-button>-->
              </el-popover>
            </div>
          </div>
          <div class="photo_item">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              accept=".jpg, .png, jpeg"
              :on-change="(file) => handleAvatarSuccess(file, 4)"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="ruleForm.degree_img" :src="ruleForm.degree_img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="photo_p">
              <p class="photo_p_t">学位证(非必填)</p>
              <p class="photo_p_t2">图片大小不超过5M</p>
              <p class="photo_p_t2">图片分辨率不低于72dpi</p>
              <el-popover placement="top-start" width="400" trigger="hover">
                <img
                  style="width: 100%"
                  src="https://t9.baidu.com/it/u=3980720114,1326431054&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=5C72851A87C041491ECDE8CA030080B1&sec=1745168400&t=b2e52f9a2dfa7106675e6fa28e84ee81"
                  alt=""
                />
                <!--<el-button slot="reference" style="padding: 0 !important" type="text">查看示例</el-button>-->
              </el-popover>
            </div>
          </div>
        </div>
      </el-form-item>
      <div class="title">
        <span>证书信息</span>
        <el-button style="margin-left: auto" type="primary" @click="addcert()">新增证书信息</el-button>
      </div>

      <template v-for="(item, index) in ruleForm.certs">
        <el-form-item label="资质类型" prop="type">
          <el-select style="width: 100%" v-model="item.type_id" placeholder="请选择">
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职业证书编号" prop="cert_code">
          <el-input v-model="item.cert_code" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="是否永久有效" prop="expire_type">
          <el-select style="width: 100%" v-model="item.expire_type" placeholder="请选择">
            <el-option label="是" :value="1">是</el-option>
            <el-option label="否" :value="2">否</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书有效期" prop="effective" v-if="item.expire_type == 2">
          <el-date-picker
            style="width: 100%"
            v-model="item.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="证书照片" prop="cert_imgs">
          <div class="photo">
            <div class="photo_item">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                accept=".jpg, .png, jpeg"
                :on-change="(file) => handleAvatarSuccess(file, 5, index)"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="item.cert_imgs" :src="item.cert_imgs" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="deleteCert(index)">删除证书</el-button>
        </el-form-item>
      </template>
    </el-form>
    <div class="footer">
      <el-button @click="back">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/libs/request';

export default {
  name: 'addTeacher',
  data() {
    return {
      modal: false,
      ruleForm: {
        username: '',
        idcard: '',
        mobile: '',
        idcard_img: '',
        idcard_img2: '',
        graduation_img: '',
        degree_img: '',
        id: '',
        certs: [],
      },
      types: [],
      rules: {
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    showModal(id = '') {
      this.modal = true;
      this.ruleForm.id = id;
      request({
        url: 'teacher/info',
        method: 'post',
        data: { id: id },
      }).then((res) => {
        if (id) {
          this.ruleForm = res.data.data;
        } else {
          this.ruleForm = {
            username: '',
            idcard: '',
            mobile: '',
            idcard_img: '',
            idcard_img2: '',
            graduation_img: '',
            degree_img: '',
            id: '',
            certs: [],
          }
        }
        this.types = res.data.types;
        this.$refs['ruleForm'].clearValidate()
      });
    },
    deleteCert(index) {
      this.ruleForm.certs.splice(index, 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let loading = this.$loading();
          request({
            url: 'teacher/save',
            method: 'post',
            data: this.ruleForm,
          })
            .then((res) => {
              loading.close();
              this.$parent.getList();
              this.back();
            })
            .catch((e) => {
              this.$message({
                message: e.msg,
                type: 'error',
              });
              loading.close();
            });
        } else {
          // this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    addcert() {
      this.ruleForm.certs.push({
        type_id: '',
        cert_code: '',
        expire_type: '',
        start_time: '',
        end_time: '',
        cert_imgs: '',
      });
    },
    handleAvatarSuccess(file, type, index = 0) {
      let loading = this.$loading();
      let formData = new FormData();
      formData.append('file', file.raw);
      request
        .post('teacher/upload', formData, {
          file: true,
        })
        .then((res) => {
          if (type == 1) {
            this.ruleForm.idcard_img = res.data.url;
          } else if (type == 2) {
            this.ruleForm.idcard_img2 = res.data.url;
          } else if (type == 3) {
            this.ruleForm.graduation_img = res.data.url;
          } else if (type == 4) {
            this.ruleForm.degree_img = res.data.url;
          } else if (type == 5) {
            this.ruleForm.certs[index]['cert_imgs'] = res.data.url;
          }
          loading.close();
        })
        .catch((e) => {
          this.$message({
            message: e.msg,
            type: 'error',
          });
          loading.close();
        });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    back() {
      this.modal = false;
    },
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.title > span {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}

.photo {
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.photo_item {
  display: flex;
  align-items: flex-start;
}

.photo_item:first-child {
  margin-right: 80px;
}

.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 120px;
  display: flex;
  align-items: center;
}

.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 100%;
  display: block;
}

.photo_p {
  margin-left: 10px;
}

.photo_p_t {
  font-size: 12px;
  color: #000;
  margin-bottom: 15px;
  line-height: 20px;
}

.photo_p_t2 {
  font-size: 12px;
  color: #8c939d;
  line-height: 20px;
}

.footer {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e6e6e6;
}
</style>
<style>
.custom-dialog-style .el-dialog__body {
  height: 70vh;
}
</style>
